// tabbar
<template>
  <div class="nav-tab">
    <div class="nav-container">
      <div class="left-nav">
        <el-image
          class="left-nav-image"
          :src="userImageUrl"
          :fit="fit"
        >
        </el-image>
      </div>
      <div class="center-nav">
        <div 
          v-for="item in CENTER_NAV_LIST" 
          :key="item.id"
          :class="['center-nav-item', {'is-active': currentCenterNavId === item.id}]"
          @click="handleClickNavTab(item)" 
        >
          {{ item.name }}
        </div>
      </div> 
      <div class="right-nav">
        <el-input placeholder="请输入内容" v-model="searchParams" :style="{width:'80%'}">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>

import { CENTER_NAV_LIST } from '@/consts'

export default {
  data(){
    return {
      userImageUrl: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.StrDRqennoZNbzSPZapKZwAAAA?r=0&rs=1&pid=ImgDetMain&o=7&rm=3',
      CENTER_NAV_LIST: Object.freeze(CENTER_NAV_LIST),
      currentCenterNavId: void 0,
      searchParams:''
    }
  },
  watch:{
    '$route':{
      handler(newVal){
        if(newVal?.fullPath === '/'){
          this.currentCenterNavId = 1
        }else{
          const pathData = this.CENTER_NAV_LIST.find(item => item?.path === newVal?.fullPath)
          if(pathData){
            this.currentCenterNavId = pathData?.id
          }
        }
      },
      immediate: true
    }
  },
  mounted(){
    // this.userImageUrl = localStorage.getItem('userImageUrl')
  },
  computed:{
    fit(){
      return 'fill'
    }
  },
  methods:{
    handleClickNavTab(item){
      this.currentCenterNavId = item?.id;
      if(this.$route.fullPath === item?.path) return;
      this.$router.push(item?.path);
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-tab {
  display: flex;
  // flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  background-color: rgba($color: #fff, $alpha: 1);
  box-shadow: 2px 2px 20px #daf2f5;
  

  width: 100%;
  position: sticky; 
  top: 0px; 
  z-index: 100;

  .nav-container{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    .left-nav{
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .left-nav-image{
        width: 55px;
        height: 55px;
        border-radius: 55px;
      }
    }
    .center-nav{
      height: 100%;
      flex: 4;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .center-nav-item{
        padding: 10px 0;
        margin: 0px 20px;
        position: relative;
        cursor: pointer;
        font-size: 1.2rem;
      }
      .center-nav-item::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #1bd7f0;
        transform: scaleX(0);
        transition: transform 0.3s ease-in-out;
      }
      .center-nav-item.is-active::after{
        transform: scaleX(1);
      }
    }

    .right-nav{
      height: 100%;
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    
  }

  
}
</style>